const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ClearWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
    //入口： 有且可以有多个
    entry:{
        index:["./src/js/main.js"]
    },
    // 打包环境：开发 & 生产
    mode:"production",
    //mode:"development",
    // 出口： 有且只能有一个
    output:{
        filename: "[name]-bundle.js",
        path: path.resolve(__dirname, "../dist"),
        publicPath: "./"
    },
    //本地服务器
    devServer:{
        contentBase: "dist",
        hot: true,
        overlay: true
    },
    devtool:'source-map',
    module: {
        rules: [
            //js loader
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader"
                    }
                ],
                exclude: /node_modules/
            },
            // css loader
            {
                test: /\.css$/,
                exclude: /node_modules/,
                // use:['style-loader','css-loader','postcss-loader']

                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','postcss-loader'],
                    publicPath: '../' //解决css背景图的路径问题
                })
            },
            // html loader
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {
                            attrs: ["img:src"]
                        }
                    }
                ]
            },
            //images loader
            {
                test: /\.(jpg|gif|png|mp4|mp3|ttf)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "images/[name].[ext]?[hash]"
                        }
                    }
                ]
            }
        ]
    },
    //插件
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ClearWebpackPlugin(['../dist']),
        new HTMLWebpackPlugin({
            chunks:['index'],
            filename: 'index.html',
            template: "./src/index.html",
            hash: true
        }),
        new CopyWebpackPlugin([{
            from: path.join(__dirname, '../src/assets'),
            to: path.join(__dirname, '../dist/assets'),
        }]),
        new CopyWebpackPlugin([{
            from: path.join(__dirname, '../src/css/*.ttf'),
            to: path.join(__dirname, '../dist/css/*.ttf'),
        }]),
        new CopyWebpackPlugin([{
            from: path.join(__dirname, '../src/images'),
            to: path.join(__dirname, '../dist/images'),
        }]),
        new ExtractTextPlugin('css/index.css'),
    ]
}
